<template>
  <h1>轮播图列表：</h1>

  <el-table :data="bannerList" style="width: 100%">
    <el-table-column prop="bannerid" label="编号" width="180" />

    <el-table-column width="180">
      <template #default="scope">
        <img class="banner_img" :src="scope.row.img">
      </template>
    </el-table-column>

    <el-table-column prop="link" label="图片的连接" />
    <el-table-column prop="alt" label="图片的提示" />

    <el-table-column label="是否应用" v-if="route.meta.crud[2] == '1'">
      <template #default="scope">
        <el-switch v-model="scope.row.flag" @change="updateFlag(scope.row.bannerid, scope.row.flag)" />
      </template>
    </el-table-column>

    <el-table-column label="删除" v-if="route.meta.crud[3] == '1'">
      <template #default="scope">
        <el-button @click="deleteBanner(scope.row.bannerid)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { ElMessage } from 'element-plus';
// @ 在vite.config.ts里定义了，表示 src路径
import { getBannerListApi, deleteBannerByIdApi, updateFlagApi } from "@/api/banners.ts";
import type { AxiosResponse } from "axios";
import type { IBanner } from "@/myTypes";
import { useRoute } from "vue-router";

const route = useRoute();//这就是选项式api中的 this.$route

console.log("轮播图列表route", route);

const bannerList = reactive<Array<IBanner>>([])

//获取轮播图数据。 
function getBannerList() {
  getBannerListApi()
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {
        //1、先删除原来数组中的数据 
        bannerList.length = 0;
        // 2、把后端返回来的数据push到数组
        bannerList.push(...res.data.data);
      }
    })
}

getBannerList();

// onMounted(()=>getBannerList());

// 删除轮播图
// 两种思路：
// 1、把后端的数据库中数据删除后，重新从后端获取全部数据
// 2、把后端的数据库中的数据删除后，前端删除前端（删除数组中的数据)
function deleteBanner(bannerid: string) {
  console.log("bannerid", bannerid);
  if (confirm("亲，您真的要删除吗？")) {
    deleteBannerByIdApi(bannerid)
      .then((res: AxiosResponse) => {
        if (res.data.code === "200") {
          alert("亲，删除成功了");

          // 第一种：删除成功后，重新发送请求，获取数据
          // getBannerList();
          // 第二种：删除前端数组中的数据
          // 1）、把数组中对应的数据删除掉
          let arr = bannerList.filter(item => item.bannerid != bannerid);
          bannerList.length = 0;
          bannerList.push(...arr);
        }
      })

  }
}


// 修改轮播图的访问状态
function updateFlag(bannerid: string, flag: boolean) {
  console.log("bannerid", bannerid);
  console.log("flag", flag);

  updateFlagApi(bannerid, flag)
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {
        ElMessage({
          message: "修改成功！",
          type: "success",
          duration: 1500
        })
      }
    })
}

</script>

<style scoped>
.banner_img {
  width: 100px;
  height: 60px;
}
</style>